<template>
  <div class="comment-wrapper">
    <p class="vita-comment-author">{{comment.commentAuthor}}</p>
    <p class="vita-comment-date">大中华局域网  {{postDate}}</p>
    <refer-comment v-if="comment.refers.length > 0" :refers="comment.refers"></refer-comment>
    <p class="vita-comment-content">{{comment.content}}</p>
  </div>
</template>

<script>

  import ReferComment from './refer-comment.vue'
  import moment from 'moment'

  export default {

    props: ['comment'],

    components: {
      ReferComment
    },

    computed: {
      postDate: function() {
        let date = moment(this.comment.pubDate)
        let curr = moment(new Date())
        // 如果是同一天
        if (date.isSame(curr, 'day')) {
          let diff = curr.diff(date) / 3600 / 1000
          if (diff < 1) {
            return parseInt(diff * 60) + '分钟前'
          } else {
            return parseInt(diff) + '小时前'
          }
        } else {
          //不同一天
          return date.format("YYYY-MM-DD")
        }
      }
    }

  }

</script>

<style lang="sass">
  
  @import '../scss/vita/vita-variable.scss';
  @import '../scss/vita/vita-rem.scss';

  .vita-comment-author {
    font-size: rem(45px);
    color: #5191d2;
  }

  .vita-comment-content {
    font-size: rem(51px);
    line-height: 1.5;
    margin-top: rem(20px);
    font-weight: 350;
  }

  .vita-comment-date {
    color: #858584;
    font-size: rem(40px);
    margin-top: rem(20px);
  }

  .comment-refer {
    border: 1px solid #d5d5ba;
    background-color: #f8f8f1;
    padding: rem(10px) rem(33px) 0;
    margin: 0 rem(-25px);
    .vita-comment-author {
      margin-top: rem(30px);
    }
  }

  .comment-wrapper {
    border-bottom: 1px solid #dbdbdb;
    padding: rem(30px);
    color: $vita-dark;
  
    & > .comment-refer {
      margin: 0;
      margin-top: rem(30px);
    }

  }

</style>